<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ApiTEST</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery.min.js"></script>

  </head>
  <body>
    <div class="content">
      <div class="left row-method">
        <select name="method" id="api_method" class="form-control">
          <option value="get">get</option>
          <option value="post">post</option>
          <option value="delete">delete</option>
        </select>
      </div>
      <div class="left row-http">
        <input
          placeholder="http"
          id="http_url_input"
          class="form-control input-text"
        />
      </div>
      <span
        ><button type="button" class="btn btn-success" id="http_send">
          发送请求
        </button></span
      >
      <h2>Query Params</h2>
      <table id="params_table" class="table" >
        <thead>
          <tr>
            <th>KEY</th>
            <th>VALUE</th>
          </tr>
        </thead>
        <tbody>
          <tr class="params_p" cnt="1">
            <td>
              <input
                style="width:80%"
                class="form-control inputVal"
                type="text"
                name="p_name_1"
                placeholder="Key"
                value=""
                maxlength="100"
              />
            </td>
            <td>
              <input
              style="width: 70%;"
                class="form-control left inputVal"
                type="text"
                name="p_value_1"
                placeholder="Value"
                value=""
                maxlength="5000"
              /><button
                class="btn btn-danger left"
                onclick="javascript:del_param(this);"
                type="button"
              >
                删除参数
              </button>
            </td>
          </tr>
          <tr id="foot_end">
            <td colspan="2" >
              <button class="btn btn-success" id="add_parameter_btn" type="button" >添加参数</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>Header</h2>
      <table id="headers_table" class="table">
        <thead>
          <tr>
            <th width="45%">Header名称</th>
            <th>Header值</th>
          </tr>
        </thead>
        <tbody>
            <tr class="headers_p" cnt="1">
                <td>
                  <input
                    style="width:80%"
                    class="form-control inputVal"
                    type="text"
                    name="h_name_1"
                    placeholder="Key"
                    value=""
                    maxlength="100"
                  />
                </td>
                <td>
                  <input
                  style="width: 70%;"
                    class="form-control left inputVal"
                    type="text"
                    name="h_value_1"
                    placeholder="Value"
                    value=""
                    maxlength="5000"
                  /><button
                    class="btn btn-danger left"
                    onclick="javascript:del_param(this);"
                    type="button"
                  >
                    删除参数
                  </button>
                </td>
              </tr>
          <tr id="foot_end">
            <td colspan="2">
              <button class="btn btn-success" id="add_api_headers" type="button">添加Header</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>返回body</h2>
      <textarea class="form-control" id="jsoneditor"> </textarea>
    </div>
    <script src="http.js"></script>
  </body>
</html>
